

// 点击地址
let oarea = document.querySelector(".top-area");
let olist = document.querySelector(".top-area-list");
let oadel = document.querySelector(".del-area");
oarea.onclick = function (evt) {
    let e = evt || event;
    olist.style.display = "block";

    olist.onblur = function () {
        olist.style.display = "none";
    }
    oadel.onclick = function () {
        olist.style.display = "none"
    }
    return false;
}

// 轮播图
class Banner {
    constructor(obox, oleft, oright, oli) {
        this.obox = obox;
        this.oleft = oleft;
        this.oright = oright;
        this.oli = oli;
        this.index = 0;
        this.over();
    }
    //换box的背景图
    box() {
        this.obox.src = `imgs/banner/banner${this.index}.jpg`;
    }
    //换li背景色
    li() {
        for (let i = 0; i < this.oli.length; i++) {
            if (this.index == i) {
                this.oli[this.index].style.borderBottom = "3px solid red";
            } else {
                this.oli[i].style.borderBottom = "none";
            }
        }
        this.box();
    }
    liclick() {
        let that = this;
        for (let i = 0; i < this.oli.length; i++) {
            this.oli[i].onmousemove = function () {
                that.index = i;
                that.box();
                that.li();
            }
        }
    }
    zd() {
        let that = this;
        action();
        this.obox.onmouseout = function () {
            action()
        }
        this.oli[this.index].onmouseout = function () {
            action()
        }
        function action() {
            let time;
            let obanner = that.obox.parentNode.parentNode;
            obanner.onmouseover = function () {
                clearInterval(time)
            }
            that.oli[that.index].onmouseover = function () {
                clearInterval(time)
            }
            time = setInterval(() => {
                that.right()
            }, 3000);
        }
    }
    left() {
        this.index--;
        if (this.index == -1) {
            this.index = this.oli.length - 1;
        }
        this.li();
        this.box();
    }
    right() {
        this.index++;
        if (this.index == this.oli.length) {
            this.index = 0;
        }
        this.box();
        this.li();
    }
    over() {
        let that = this;
        this.oleft.onclick = function () {
            that.left();
        }
        this.oright.onclick = function () {
            that.right();
        }
        this.box();
        this.liclick();
        this.li();
        this.zd()
    }
}

// sortlist每个对应的图片
let oitem = document.getElementsByClassName("item");
function oboximg(box) {
    for (let i = 0; i < box.length; i++) {
        box[i].firstElementChild.firstElementChild.src = `imgs/sort-list/${i}.jpg`
    }
}
oboximg(oitem);

